<template>
  <div style="margin-top: 15px">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="流量趋势" name="first"></el-tab-pane>
        <el-tab-pane label="访问量" name="second"></el-tab-pane>
      </el-tabs>
      <div v-if="activeName === 'first'">
        <div ref="chart" style="width: 100%; height: 400px;"></div>
      </div>
      <div v-if="activeName === 'second'">
        <div ref="zChart" style="width: 100%; height: 400px;"></div>
      </div>
    </el-card>
  </div>
</template>

<script>

import * as echarts from 'echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import {dayVisited, hoverVisited} from "@/api/webapp/panel";

export default {
  data() {
    return {
      activeName: 'first',
      values: [],
      keys: [],
      zKeys: [],
      zValues: [],
    }
  },
  created() {
    this.getVisitedData()
  },
  methods: {
    getVisitedData() {
      hoverVisited(12).then(res => {
        if (res.success) {
          this.keys = res.data.keys;
          this.values = res.data.values;
          this.$nextTick(() => {
            const chartDom = this.$refs.chart
            const myChart = echarts.init(chartDom)
            const option = {
              title: {
                text: ''
              },
              tooltip: {},
              xAxis: {
                type: 'category',
                data: this.keys
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                name: '数据',
                type: 'line',
                smooth: true,
                data: this.values,
                itemStyle: {
                  color: '#37A2DA'
                }
              }]
            }
            myChart.setOption(option)
          })
        }
      })
    },
    getZVisited() {
      dayVisited(12).then(res => {
        if (res.success) {
          this.zKeys = res.data.keys
          this.zValues = res.data.values

          this.$nextTick(() => {
            const chartDom = this.$refs.zChart
            const myChart = echarts.init(chartDom)

            // 配置选项
            const option = {
              title: {
                text: ''
              },
              tooltip: {},
              xAxis: {
                type: 'category',
                data: this.zKeys
              },
              yAxis: {},
              series: [{
                name: '数据',
                type: 'bar',
                data: this.zValues,
                itemStyle: {
                  color: '#37A2DA'
                }
              }]
            }

            // 使用设置好的选项绘制图表
            myChart.setOption(option)
          })
        }
      })
    },
    handleClick(e) {
      this.activeName = e.name
      if (e.name === 'first') {
        this.getVisitedData()
      }
      if (e.name === 'second') {
        this.getZVisited()
      }
    }
  }
}

</script>
